<template>
  <a-form
    :model="formData.form"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-tabs>
      <a-tab-pane key="1" tab="课程详情">
        <a-form-item label="课程名称">
          <a-input v-model:value="formData.form.title" />
        </a-form-item>
        <a-form-item label="课程图片">
          <a-upload
            v-model:value="formData.form.image"
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="$http.defaults.baseURL + '/upload'"
            @change="imgHandleChange"
          >
            <img
              v-if="formData.form.image"
              :src="formData.form.image"
              alt="image"
              :style="{ height: '80px' }"
            />
            <div v-else>
              <!-- todo -->
              <loading-outlined v-if="loading" />
              <plus-outlined v-else />
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item label="浏览数">
          <a-input v-model:value="formData.form.readed" type="number" />
        </a-form-item>
        <a-form-item label="学员数">
          <a-input v-model:value="formData.form.students" type="number" />
        </a-form-item>
        <a-form-item label="评分">
          <a-rate v-model:value="formData.form.score" allow-half />
          <span class="ant-rate-text">{{ formData.form.score }}</span>
        </a-form-item>
        <a-form-item label="价格">
          <a-input v-model:value="formData.form.price" type="number" />
        </a-form-item>
      </a-tab-pane>
      <a-tab-pane key="2" tab="作者信息" force-render>
        <a-form-item label="作者昵称">
          <a-input v-model:value="formData.form.author.name" />
        </a-form-item>
        <a-form-item label="作者是否为VIP">
          <a-switch v-model:checked="formData.form.author.isVip" />
        </a-form-item>
        <a-form-item label="作者头像">
          <a-upload
            v-model:value="formData.form.author.avatar"
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="$http.defaults.baseURL + '/upload'"
            @change="avatarHandleChange"
          >
            <img
              v-if="formData.form.author.avatar"
              :src="formData.form.author.avatar"
              alt="avatar"
              :style="{ height: '80px' }"
            />
            <div v-else>
              <!-- todo -->
              <loading-outlined v-if="loading" />
              <plus-outlined v-else />
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload>
        </a-form-item>
      </a-tab-pane>
      <a-tab-pane key="3" tab="课程分类" force-render>
        <a-form-item label="课程分类">
          <a-select
            v-model:value="formData.form.category"
            placeholder="please select your course category"
          >
            <a-select-option
              v-for="item in data.resource"
              :key="item._id"
              :value="item._id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-tab-pane>
    </a-tabs>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">
        {{ id ? 'Edit' : 'Create' }}
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import Router from '../router'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
import { reactive, toRaw, onMounted, getCurrentInstance } from 'vue'
import {
  ResourcePost,
  ResourceGetById,
  ResourceUpdate,
  ResourceGetAll
} from '../ceshi.js'
export default {
  props: ['id'],
  components: {
    LoadingOutlined,
    PlusOutlined
  },
  setup(props, ctx) {
    const formData = reactive({
      form: {
        title: '',
        readed: undefined,
        students: undefined,
        image: '',
        score: undefined,
        price: undefined,
        author: {
          name: '',
          isVip: false,
          avatar: ''
        }
      }
    })
    const data = reactive({
      resource: []
    })
    const instance = getCurrentInstance()
    function imgHandleChange(file) {
      // console.log(file.file)
      formData.form.image = file.file.response
        ? file.file.response.url
        : undefined
    }
    function avatarHandleChange(file) {
      // console.log(file.file)
      formData.form.author.avatar = file.file.response
        ? file.file.response.url
        : undefined
    }
    // 表单提交事件
    function onSubmit() {
      console.log(toRaw(formData.form))
      if (props.id) {
        ResourceUpdate('courses', props.id, toRaw(formData.form))
          .then(res => {
            console.log(res)
            instance.ctx.$message.success('修改成功！')
          })
          .catch(err => {
            console.log(err)
            instance.ctx.$message.success('修改失败！')
          })
      } else {
        ResourcePost('courses', toRaw(formData.form))
          .then(res => {
            console.log(res)
            instance.ctx.$message.success('创建成功！')
          })
          .catch(err => {
            console.log(err)
            instance.ctx.$message.success('创建失败！')
          })
      }
      Router.push('/course/list')
    }
    // 获取详情数据
    onMounted(async () => {
      const res = await ResourceGetAll('categories')
      data.resource = res.data
      console.log(toRaw(data.resource))
      if (props.id) {
        const model = await ResourceGetById('courses', props.id)
        console.log(model.data)
        formData.form = model.data
        console.log(formData.form)
      }
    })
    return { imgHandleChange, avatarHandleChange, formData, onSubmit, data }
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      loading: false,
      imageUrl: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  max-height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
